﻿<Window x:Class="_12.BindToList.MasterDetailBinding"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MasterDetailBinding" Height="405" Width="567">
    <Window.Resources>
        <Style TargetType="ListBox">
            <Setter Property="Margin" Value="6"/>
            <Setter Property="IsSynchronizedWithCurrentItem" Value="True"/>
        </Style>
        <Style TargetType="TextBlock">
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="6"/>
        </Style>
    </Window.Resources>
    <Grid Name="grid">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="8*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <!--********************* Family *********************-->
        <TextBlock Grid.Row="0" Grid.Column="0" Text="Families:"/>
        <!--note: {binding} without any path, means it is bind to the whole list, not the current selected item-->
        <ListBox ItemsSource="{Binding}" Grid.Row="1" Grid.Column="0">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Path=Name}"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <!--********************* Person *********************-->
        <TextBlock Grid.Row="0" Grid.Column="1" >
            <TextBlock Text="{Binding Path=Name}" FontWeight="Black"/><!--family name-->
            <TextBlock Text="Members:"/>
        </TextBlock>
        <ListBox  Grid.Row="1" Grid.Column="1"
                  ItemsSource="{Binding Path=Members}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <!--person's name-->
                        <TextBlock Text="{Binding Path=Name}"/>
                        <TextBlock Text="(age:"/>
                        <TextBlock Text="{Binding Path=Age}"/>
                        <TextBlock Text=")"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <!--********************* Traits *********************-->
        <TextBlock Grid.Row="0" Grid.Column="2">
            <!--note: 'Members/Name' is always rooted at the DataContext, you can think it as to say:
            currentFamily.Members.currentMember.Name-->
            <TextBlock Text="{Binding Path=Members/Name}" FontWeight="Black"/><!--Person name-->
            <TextBlock Text="Traits:"/>
        </TextBlock>
        <!--note: 'Members/Traits' is always rooted at the DataContext, you can think it as to say:
            currentFamily.Members.currentMember.Traits-->
        <ListBox  Grid.Row="1" Grid.Column="2"
                  ItemsSource="{Binding Path=Members/Traits}">
        </ListBox>
    </Grid>
</Window>
